<template>
	<view class="step">
		<template v-for="i, idx in list">
			<template v-if="idx < list.length - 1">
				<view class="step-item" :key="idx">
					<view class="step-head">
						<view class="step-icon">
							<u--image width="30rpx" height="30rpx" src="/static/images/ui/bg/check.png"></u--image>
						</view>
						<view class="step-line"></view>
					</view>
					<view class="step-body">
						<view class="flex justify-between">
							<view class="step-title">
								<text v-if="idx == 0">提交人</text>
								<text v-else>审批人({{ i.auditRole }})</text>
							</view>
							<view class="step-time">{{ i.auditTime }}</view>
						</view>
						<view class="step-sub">{{ i.auditUserName }}</view>
						<view class="step-content" v-if="idx > 0">
							<view class="flex align-center" v-if="i.status == 2">
								<u-icon name="checkmark-circle-fill" color="#1dbf5c" size="12"></u-icon>
								<view class="ml-1 text-green font-12">审批通过</view>
							</view>
							<view class="flex align-center" v-else-if="i.status == 3">
								<u-icon name="checkmark-circle-fill" color="#EE3636" size="12"></u-icon>
								<view class="ml-1 text-red font-12">审批不通过</view>
							</view>
							<view class="flex align-center" v-else-if="i.status == 1">
								<u-icon name="clock-fill" color="#86898c" size="12"></u-icon>
								<view class="ml-1 font-12 text-grey1">待审批</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="step-item">
					<view class="step-head">
						<view class="step-icon">
							<u--image width="30rpx" height="30rpx" src="/static/images/ui/bg/check.png"></u--image>
						</view>
						<view class="step-line"></view>
					</view>
					<view class="step-body">
						<view class="flex justify-between">
							<view class="step-title">审批人({{ i.auditRole }})</view>
							<view class="step-time">{{ i.auditTime }}</view>
						</view>
						<view class="step-sub">{{ i.auditUserName }}</view>
						<view class="step-content" v-if="idx > 0">
							<view class="flex align-center" v-if="i.status == 2">
								<u-icon name="checkmark-circle-fill" color="#1dbf5c" size="12"></u-icon>
								<view class="ml-1 text-green font-12">审批通过</view>
							</view>
							<view v-else-if="i.status == 3">
								<view class="flex align-center">
									<u-icon name="checkmark-circle-fill" color="#EE3636" size="12"></u-icon>
									<view class="ml-1 text-red font-12">审批不通过</view>
								</view>
								<view class="flex align-center">
									<view class="ml-1 text-grey font-12">拒绝理由：{{ i.reason }}</view>
								</view>
							</view>

							<view class="flex align-center" v-else-if="i.status == 1">
								<u-icon name="clock-fill" color="#86898c" size="12"></u-icon>
								<view class="ml-1 font-12 text-grey1">待审批</view>
							</view>
						</view>
					</view>
				</view>
				<view class="step-item" v-if='i.copyUserName'>
					<view class="step-head">
						<view class="step-icon">
							<u--image width="30rpx" height="30rpx" src="/static/images/ui/bg/check.png"></u--image>
						</view>
						<view class="step-line"></view>
					</view>
					<view class="step-body">
						<view class="flex justify-between">
							<view class="step-title">抄送人(财务管理员)</view>
							<view class="step-time">{{ i.auditTime }}</view>
						</view>
						<view class="step-sub">{{ i.copyUserName }}</view>

					</view>
				</view>
			</template>
		</template>

	</view>
</template>

<script>
export default {
	name: "bg-step",
	props: {
		list: {
			default: () => ([])
		}
	},
	data() {
		return {

		};
	}
}
</script>

<style scoped>
.step {}

.step-item {
	position: relative;
	display: flex;
	padding-bottom: 60rpx;
}

.step-line {
	position: absolute;
	width: 2rpx;
	height: 100%;
	background-color: #FAFAFA;
	left: 15rpx;
}

.step-body {
	margin-left: 18rpx;
	flex: 1 0 auto;
}

.step-title {
	font-size: 30rpx;
	line-height: 30rpx;
	font-family: PingFang SC, PingFang SC-Medium;
	font-weight: 500;
	text-align: left;
	color: #1d2129;
}

.step-time {
	font-size: 26rpx;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: 400;
	text-align: right;
	color: #86898c;
}

.step-sub {
	font-size: 26rpx;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: 400;
	text-align: left;
	color: #4e5969;
	line-height: 42rpx;
	margin: 30rpx 0 20rpx 0;
}
</style>